import styled from 'styled-components'

export const TabsWrapper = styled.div`
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 400;
	color: ${props => (props.theme.isAlpha ? '#fff' : '#222')};
	height: 48px;
	padding: 0 24px;

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin: 0 16px;
		padding-bottom: 10px;
		cursor: pointer;

		span {
			width: 100%;
			text-align: center;
		}

		&:after {
			content: '';
			background: #a2a2a2;
			height: 2px;
			width: 0;
			position: absolute;
			left: 50%;
			top: 100%;
			transition: all 0.3s ease-out;
		}

		&:hover {
			color: #a2a2a2;

			&:after {
				content: '';
				background: #a2a2a2;
				height: 2px;
				width: 100%;
				position: absolute;
				left: 0;
				top: 100%;
			}
		}

		&.active {
			&:hover {
				color: ${props => (props.theme.isAlpha ? '#fff' : '#222')};
			}

			&:after {
				content: '';
				background: ${props => (props.theme.isAlpha ? '#fff' : '#222')};
				height: 2px;
				width: 100%;
				position: absolute;
				top: 100%;
				left: 0;
			}
		}
	}
`
